/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:焦元义
 */

import React, {FC, useMemo,} from 'react';
import {Button, Input, Switch,} from 'antd';
import service from './service';
import {SysDicModel} from './data';
import Details from './components/Details';
import Edit from './components/Edit';
import ProTableCrud, {ProTableCrudOperate} from '@/components/ProTableCrud';
import useList, {ListOperate} from '@/hooks/useList';
import useDelete from '@/hooks/useDelete';
import {ProColumns} from "@ant-design/pro-table/es/Table";
import {getStatusEnum, hasPermission} from "@/utils/utils";
import config from "@/config";
import useDialog from "@/hooks/useDialog";
import {SysDicCategoryModel} from "@/pages/sys/dicCategory/data";

const recordStatus = 'null';

/** 系统字典编辑表单组件属性 */
export interface EditProps {
  selectCode: SysDicCategoryModel,
  treeWidth: number,
  ChangeWidth: () => void
}

/** 系统字典模块 */
const SysDicPage: FC<EditProps> = (props) => {
  const {selectCode, treeWidth} = props;
  const editOperate = useDialog();
  const detailsOperate = useDialog();

  //选择编码
  const dicCode = useMemo(function () {
    if(selectCode!=undefined){
      const code = props.selectCode.code;
      return code;
    }
    return " system";
  }, [selectCode]);

  //List
  const listOperate = useList<SysDicModel>({
    onLoad: (params) => {
      // if (categoryCode) {
      const p = {status: recordStatus, ...params};
      return service.selectList(p)
      // }
      // return;
    },
    onExport: (params) => service.export(params),
  });

  //Delete
  const deleteOperate = useDelete<SysDicModel>({
    onDelete: (ids, _) => service.delete(ids.join()),
    onDeleteSucess: listOperate.handleReload,
  });

  //表格列
  const cols = useMemo(() => getCols(listOperate), []);

  //不选择不能新建
  const onSelectToShow = useMemo(function () {
    if(selectCode!=undefined){
    if (selectCode.parentId=='0') {
      console.log('selectCode1',selectCode)
      return true}
    else return false;}
    return true;
    }, [selectCode]);



  //增删改查选项
  const tableOperate: ProTableCrudOperate<SysDicModel> = {
    cols,
    showDetails: hasPermission(config.permission.sysDic.select),
    // showCreate: (hasPermission(config.permission.sysDic.insert) && onSelectToShow),
    showEdit: hasPermission(config.permission.sysDic.update),
    showDelete: hasPermission(config.permission.sysDic.delete),
    showExport: hasPermission(config.permission.sysDic.export),
    listOperate,
    editOperate,
    deleteOperate,
    detailsOperate,
    optionColumnPosition: 2,
    getToolbarItems: (_, rows) => [(<Button key="toolbarCreate" type='primary' disabled={onSelectToShow}
      onClick={() => editOperate && editOperate.show({
        created: true,
        newData:{categoryCode: dicCode},
        onSubmitSucess: listOperate.handleReload
    })}><i className='fal fa-plus'/>新建</Button>), 'edit', 'delete', 'export', (<Button
      onClick={() => {
        props.ChangeWidth();
      }}><i className="fa fa-bars"/>收缩</Button>),],
    getEditElement: (props) => (
      <Edit {...props} /*listCode={listByCategoryCode}*/ />),
    getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <ProTableCrud headerTitle="系统字典列表"
                  pagination={false}
                  scroll={{x: 1000}}
                  params={{categoryCode: dicCode}}
                  deps={[treeWidth,selectCode]}
                  rowKey="id" operate={tableOperate}/>
  );
};

/** 获取表格列 */
function getCols(listOperate: ListOperate<SysDicModel>): (ProColumns<SysDicModel>[]) {
  return [
    {
      title: '关键字',
      dataIndex: 'name',
      hideInTable: true,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      formItemProps: {
        'placeholder': '请输入字典名称/简拼',
      },
      renderFormItem: (item, {type, defaultRender, ...rest}) => {
        return (<Input {...rest} placeholder="请输入字典名称"/>)
      },
    },
    {
      title: '字典名称',
      dataIndex: 'name',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      align: 'center',
      width: '12%',
      formItemProps: {
        'placeholder': '请输入字典名称/简拼',
      },
      renderFormItem: (item, {type, defaultRender, ...rest}) => {
        return (<Input {...rest} placeholder="请输入字典名称"/>)
      },
    },
    {
      title: '字典值',
      dataIndex: 'value',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      align: 'center',
      width: '12%',
      formItemProps: {
        'placeholder': '请输入字典值',
      },
    },
    {
      title: '序号',
      dataIndex: 'path',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      align: 'center',
      width: '6%',
      formItemProps: {
        'placeholder': '请输入序号',
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInTable: false,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      width: '6%',
      align: 'center',
      formItemProps: {
        'placeholder': '请选择状态',
        'onSelect': listOperate.handleSearch
      },
      initialValue: recordStatus,
      valueEnum: getStatusEnum(),
      render: (_, record) => {
        return (<Switch size={"small"} checked={record.status} onClick={async () => {
          await service.updateStatus(record.id, record.status);
          listOperate.handleReload();
        }} key={record.id}/>)
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: true,
      sorter: false,
      formItemProps: {
        'placeholder': '请输入备注',
      },
    },
  ]
}

export default SysDicPage;


